<template>
  <div class="login-page">
    <div class="login-wrap">
      <h1 style="text-align: center;">欢迎您</h1>
      <el-form
        ref="ruleFormRef"
        style="max-width: 600px"
        :model="ruleForm"
        :rules="rules"
        label-width="auto"
        class="demo-ruleForm"
        status-icon
      >
        <el-form-item  prop="userName">
          <el-input v-model="ruleForm.userName" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item  prop="password">
          <el-input
            v-model="ruleForm.password"
            type="password"
            placeholder="请输入密码"
            show-password
          />
        </el-form-item>
      </el-form>
      <div class="btns">

      <el-button :loading="submitLoadig" style="width:335px" type="primary" @click="submitForm">
        登录
      </el-button>
      <el-button :loading="submitLoadig" style="width:335px" type="primary" @click="registerUser">
        注册
      </el-button>
    </div>

    </div>
    <canvas ref="canvas" class="background-canvas"></canvas>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import{
  login,
  register
} from '@/http/login'
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
interface RuleForm { 
  userName: string
  password: string
}
const router = useRouter()
const submitLoadig = ref(false)
const ruleFormRef = ref<any>()
const canvas = ref<HTMLCanvasElement | null>(null);
const ruleForm = reactive<RuleForm>({
  userName: '',
  password: '',
})

const rules = reactive({
  userName: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度6到20位', trigger: 'blur' },
  ],
})

const submitForm = () => {
  ruleFormRef.value.validate(async(valid: any) => {
    if (valid) {
      try {
        submitLoadig.value = true
        const res = await login(ruleForm)
        console.log(res)
        router.push('/')
      } finally {
        submitLoadig.value = false
      }
    } else {
      console.log('error submit!!')
      return false
    }
  })
}
const registerUser = () => {
  ruleFormRef.value.validate(async(valid: any) => {
    if (valid) {
      try {
        submitLoadig.value = true
        await register(ruleForm)
        ElMessage.success('注册成功')
      } finally {
        submitLoadig.value = false
      }
    } else {
      console.log('error submit!!')
      return false
    }
  })
}
const init = ()=>{
  const particles: { x: number; y: number; size: number; speedX: number; speedY: number; color: string }[] = [];
  const particleCount = 100;  
  const createParticles = () => {
    for (let i = 0; i < particleCount; i++) {
      particles.push({
        x: Math.random() * window.innerWidth,
        y: Math.random() * window.innerHeight,
        size: Math.random() * 2,
        speedX: (Math.random() - 0.5) * 2,
        speedY: (Math.random() - 0.5) * 2,
        color: `hsl(${Math.random() * 360}, 100%, 50%)`,
      });
    }
  };

  const animateParticles = (ctx: CanvasRenderingContext2D) => {
    ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);

    particles.forEach((particle) => {
      particle.x += particle.speedX;
      particle.y += particle.speedY;

      if (particle.x < 0 || particle.x > window.innerWidth) particle.speedX *= -1;
      if (particle.y < 0 || particle.y > window.innerHeight) particle.speedY *= -1;

      ctx.fillStyle = particle.color;
      ctx.beginPath();
      ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
      ctx.closePath();
      ctx.fill();
    });

    requestAnimationFrame(() => animateParticles(ctx));
  }
  if (canvas.value) {
    const ctx = canvas.value.getContext('2d');
    if (ctx) {
      canvas.value.width = window.innerWidth;
      canvas.value.height = window.innerHeight;
      createParticles();
      animateParticles(ctx);
    }else {
      console.error('无法获取 Canvas 的 2D 上下文');
    }
  };
}
onMounted(()=>{
  init()
})
</script>

<style lang="less" scoped>
.login-page{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  background-color: #181828;
  position: relative;
  .login-wrap {
    background: rgb(1 197 196 / 31%);
    width: 400px;
    padding: 20px 30px;
    box-shadow: -6px 0 20px 0 #00000014;
    border-radius: 10px;
    z-index: 1;
  }
  .background-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}
.btns{
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

</style>
